import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { imageGroupDefaultProps } from './defaultProps';
import type { ImageGroupOptions } from './type';

export interface ImageGroupProps extends ImageGroupOptions, HTMLAttributes<HTMLDivElement> {}

const ImageGroup: FC<ImageGroupProps> = (props) => {
  const { className, size, children, forwardedRef, ...imageGroupProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('ui', size, 'images', className), ...imageGroupProps },
    children,
  );
};

ImageGroup.displayName = 'ImageGroup';
ImageGroup.defaultProps = imageGroupDefaultProps;

export default ImageGroup;
